import 'package:inmotion_pro/config/r.dart';
import 'package:inmotion_pro/pages/models/realtime_item.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';

/// 实时信息Item视图
class RealtimeItemView extends StatelessWidget {
  /// 标题
  final RealtimeItemModel model;
  // 选中事件
  final Function(bool)? checkboxOnChanged;

  const RealtimeItemView({
    super.key,
    required this.model,
    this.checkboxOnChanged,
  });

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: GestureDetector(
        onTap: () {
          if (model.isEditable == true && checkboxOnChanged != null) {
            model.isSelected = !(model.isSelected);
            checkboxOnChanged!(model.isSelected);
          }
        },
        child: Container(
          color: GrayColor.gray2,
          width: double.infinity,
          height: double.infinity,
          child: Stack(
            children: [
              Visibility(
                visible: model.isEditable,
                child: Positioned(
                  top: 5.w,
                  right: 5.w,
                  child: Visibility(
                    visible: model.isSelected == true,
                    replacement: Image.asset(
                      R.unselected,
                      width: 24.w,
                      height: 24.w,
                      fit: BoxFit.cover,
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12.w),
                      child: Container(
                        width: 24.w,
                        height: 24.w,
                        color: LxCol.theme,
                        child: Center(
                          child: LxText(
                            "${model.selectedIndex}",
                            fontWeightEnum: LxFontWeightEnum.markSmall,
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                  left: CONTENT_MARGIN,
                  right: 5.w,
                  top: CONTENT_MARGIN,
                  bottom: CONTENT_MARGIN,
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      model.title,
                      style: TextStyle(
                        fontSize: 14.sp,
                        fontWeight: FontWeight.w400,
                        color: Colors.white,
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Image.asset(
                          model.imgPath,
                          width: 30.w,
                          height: 30.w,
                          fit: BoxFit.fill,
                        ),
                        Expanded(
                          child: Center(
                            child: Row(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment:
                                  CrossAxisAlignment.center, // 子组件底部对齐
                              children: [
                                Text(
                                  model.value,
                                  style: TextStyle(
                                    fontSize: 16.sp,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.white,
                                  ),
                                ),
                                Text(
                                  model.unit,
                                  style: TextStyle(
                                    fontSize: 14.sp,
                                    fontWeight: FontWeight.w600,
                                    color: Colors.white,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
